<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帖子详情 - 智能博客系统</title>
    <link rel="stylesheet" href="static/css/main.css">
    <link rel="stylesheet" href="static/css/components.css">
    <link rel="stylesheet" href="static/css/post-detail.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <a href="index.html">智能博客</a>
            </div>
            <div class="nav-menu">
                <a href="index.html" class="nav-link">首页</a>
                <a href="#" class="nav-link">分类</a>
                <a href="#" class="nav-link">关于</a>
            </div>
            <div class="nav-actions">
                <button class="theme-toggle" id="themeToggle">
                    <span class="theme-icon">🌙</span>
                </button>
                <button class="btn btn-primary" id="loginBtn">登录</button>
                <div class="user-menu" id="userMenu" style="display: none;">
                    <span class="username" id="username"></span>
                    <button class="btn btn-secondary" id="logoutBtn">退出</button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <!-- 返回按钮 -->
            <div class="back-nav">
                <button class="btn btn-secondary" onclick="history.back()">
                    ← 返回列表
                </button>
            </div>

            <!-- 帖子详情 -->
            <article class="post-detail" id="postDetail">
                <div class="post-loading" id="postLoading">
                    <div class="loading-spinner"></div>
                    <p>加载中...</p>
                </div>
                
                <div class="post-content" id="postContent" style="display: none;">
                    <header class="post-header">
                        <h1 class="post-title" id="postTitle"></h1>
                        <div class="post-meta">
                            <span class="post-author" id="postAuthor"></span>
                            <span class="post-date" id="postDate"></span>
                            <span class="post-category" id="postCategory"></span>
                            <span class="post-views" id="postViews"></span>
                        </div>
                        <div class="post-tags" id="postTags"></div>
                    </header>

                    <div class="post-body">
                        <div class="post-summary" id="postSummary"></div>
                        <div class="post-text" id="postText"></div>
                    </div>

                    <footer class="post-footer">
                        <div class="post-actions">
                            <button class="action-btn like-btn" id="likeBtn">
                                <span class="icon">👍</span>
                                <span class="count" id="likeCount">0</span>
                            </button>
                            <button class="action-btn favorite-btn" id="favoriteBtn">
                                <span class="icon">⭐</span>
                                <span class="text">收藏</span>
                            </button>
                            <button class="action-btn share-btn" id="shareBtn">
                                <span class="icon">📤</span>
                                <span class="text">分享</span>
                            </button>
                        </div>
                    </footer>
                </div>
            </article>

            <!-- 评论区 -->
            <section class="comments-section" id="commentsSection">
                <h3 class="comments-title">评论 (<span id="commentCount">0</span>)</h3>
                
                <!-- 评论表单 -->
                <div class="comment-form" id="commentForm">
                    <div class="login-prompt" id="loginPrompt">
                        <p>请先<a href="#" id="loginLink">登录</a>后发表评论</p>
                    </div>
                    <form class="comment-input" id="commentInput" style="display: none;">
                        <textarea placeholder="写下你的评论..." id="commentText" rows="4"></textarea>
                        <div class="comment-actions">
                            <button type="submit" class="btn btn-primary">发表评论</button>
                        </div>
                    </form>
                </div>

                <!-- 评论列表 -->
                <div class="comments-list" id="commentsList">
                    <div class="comments-loading" id="commentsLoading">
                        <div class="loading-spinner"></div>
                        <p>加载评论中...</p>
                    </div>
                </div>

                <!-- 评论分页 -->
                <div class="comments-pagination" id="commentsPagination" style="display: none;">
                    <button class="btn btn-secondary" id="loadMoreComments">加载更多评论</button>
                </div>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 智能博客系统. All rights reserved.</p>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户登录</h3>
                <button class="modal-close" id="loginModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="loginUsername">用户名</label>
                        <input type="text" id="loginUsername" required>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <input type="password" id="loginPassword" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">登录</button>
                        <button type="button" class="btn btn-secondary" id="showRegister">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 分享模态框 -->
    <div class="modal" id="shareModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>分享帖子</h3>
                <button class="modal-close" id="shareModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <div class="share-options">
                    <button class="share-option" data-type="copy">
                        <span class="icon">📋</span>
                        <span class="text">复制链接</span>
                    </button>
                    <button class="share-option" data-type="weibo">
                        <span class="icon">🐦</span>
                        <span class="text">微博</span>
                    </button>
                    <button class="share-option" data-type="wechat">
                        <span class="icon">💬</span>
                        <span class="text">微信</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="static/js/main.js"></script>
    <script src="static/js/post-detail.js"></script>
</body>
</html>